/**
 * Created by wangyang on 2018-12-20.
 * itwangyang@gmail.com
 * http://itwangyang.xyz
 */

@color: #1e81d2;
@mainWidth: 1200px;
@maxWidth: 100%;
@mainFontColor: #202020;
@fontSize18: 18px;
@fontSizeTitle: 42px;
@color75: #757575;
@fontSize14: 14px;
@fontSize24: 24px;
.specialStyle{
    color: #1e81d2;
}
.border-style{
    width: 462px;
    height: 2px;
    display: flex;
    span:nth-child(1){
        display: block;
        width: 100px;
        height: 2px;
        background: #1e81d2;
    }
    span:nth-child(2){
        display: block;
        width: 362px;
        height: 2px;
        background: #d3d3d3;
    }
}
.row-wrap {
    display: flex;
    flex-wrap: wrap;
}
.row{
    display: flex;
}
.row .col {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.marginTop40 {
    height: 40px;
    width: @maxWidth;
}

.marginTop20 {
    height: 20px;
    width: @maxWidth;
}

.marginAuto {
    margin: 0 auto;
}

.flexBox {
    display: flex;
    align-items: center;
}

.flexBoxCenter() {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flexBoxBetween {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/*header*/
header {
    height: 135px;

    .header-top {
        width: @mainWidth;
        .marginAuto;
        height: 76px;
        .flexBoxBetween();

        .login-reg {
            color: @mainFontColor;
            font-size: @fontSize18;

            ul {
                .flexBoxCenter;

                li {
                    margin-left: 20px;
                }
            }
        }
    }

    .header-nav {
        width: @maxWidth;
        background-color: @color;

        ul {
            width: @mainWidth;
            .marginAuto;
            height: 64px;
            .flexBox;

            li {
                padding: 0 10px;
                margin-left: 25px;

                a {
                    font-size: @fontSize18;
                    color: #fff;
                }
            }

            li:first-child {
                margin-left: 0;
            }

            li:hover {
                height: 64px;
                line-height: 64px;
                display: block;
                padding: 0 10px;
                background-color: #1574c1;
            }
        }
    }
}


/*banner*/
.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

/*main-common*/
.main-common {
    .title {
        width: @maxWidth;
        color: @color;
        font-size: @fontSizeTitle;
        .flexBoxCenter;
        margin-bottom: 26px;
        h3 {
            font-weight: normal;
            //border-image: -webkit-linear-gradient( #1e81d2 , #d3d3d3) 30 30;
            //border-image: -moz-linear-gradient( #1e81d2 , #d3d3d3) 30 30;
            //border-image: linear-gradient(bottom, #1e81d2 , #d3d3d3)  30;
            //background-clip: content-box, padding-box;
            background-clip: padding-box, border-box;
            background-origin: padding-box, border-box;
            background-image: linear-gradient(135deg, #fff, #fff), linear-gradient(135deg, #1e81d2, #d3d3d3);
            border-bottom: 2px transparent solid;
        }


    }

    .summary {
        width: @mainWidth;
        color: @color75;
        font-size: @fontSize14;
        .marginAuto;

        p {
            text-align: center;
            line-height: 1.5;
        }
    }

    .content-main {
        width: @mainWidth;
        .marginAuto;
        .flexBox;
        aside {
            flex: 0 0 18.33333%;
            margin: 22px 10px;
            width: 225px;
            .item-title {
                font-size: 24px;
                height: 45px;
                .flexBoxCenter;
                color: @mainFontColor;
                border-bottom: 2px solid #1e81d2;
            }

            .item-summary {
                height: 240px;
                background-color: #f4f4f4;

                p {
                    padding: 5px;
                    line-height: 2;
                }
            }
            .item-summary:hover{
                background-color: #fff;
                cursor: pointer;
            }
        }
        aside:nth-child(2) .item-title{
            border-bottom: 2px solid #6edfef;
        }
        aside:nth-child(3) .item-title{
            border-bottom: 2px solid #f1c911;
        }
        aside:nth-child(4) .item-title{
            border-bottom: 2px solid #8462f5;
        }
        aside:nth-child(5) .item-title{
            border-bottom: 2px solid #7cada2;
        }
    }
}


/*safety*/


/*effective*/
#effective{
    background-color: #f4f4f4;
    padding:20px 0  40px 0;
    .title{
        h3{
            background-image: linear-gradient(135deg, #f4f4f4, #f4f4f4), linear-gradient(135deg, #1e81d2, #d3d3d3);
        }
    };
    .content-main-item2{
        .item2-row-col-2{
            width:  800px;
            .marginAuto;
            .flexBoxCenter;
            aside{
                flex: 0 0 50%;
                .flexBoxCenter;
                flex-direction: column;
                .item-title{
                    font-size: @fontSize24;
                }
                .item-summary{
                    p{
                        text-align: center;
                    }
                }
            }
        }

        .item2-row-col-3{
            margin-top: 40px !important;
            width:  @mainWidth;
            .marginAuto;
            .flexBoxCenter;
            aside{
                flex: 0 0 33.3333%;
                .flexBoxCenter;
                flex-direction: column;
                .item-title{
                    font-size: @fontSize24;
                }
                .item-summary{
                    p{
                        text-align: center;
                    }
                }
            }
        }
    }


}

/*circleFriends*/
#circleFriends{
    width: @mainWidth;
    .marginAuto;
    .content-main-item3{
        .item3-row{
            height: 226px;
            background-color: #f4f4f4;
            display: flex;
            aside{
                padding: 15px;
                .item-title{
                    font-size: @fontSize24;
                }
            }


        }
    }
}


/*industryStatus*/
#industryStatus{
    height: 412px;
    background: url("../images/bg.png") no-repeat;
    background-size: cover;
    .title{
        flex-direction: column;
    }
    .content-main-item4{
        width: @mainWidth;
        .marginAuto;
        .flexBox;
        justify-content: space-between;
            aside{
                width: 385px;
                .flexBoxCenter;
                flex-direction: column;
                .item-title{
                    width: 199px;
                    height: 50px;
                    background-color: #f1c911;
                    color: #fff;
                    font-size: @fontSize24;
                    .flexBoxCenter;
                    z-index: 1;
                }
                .item-summary{
                    margin-top: -20px;
                    z-index: 0;
                    .flexBox;
                    width: 385px;
                    height: 175px;
                    background-color: #fff;
                    p{
                        padding: 10px;
                        line-height: 1.8;
                    }
                }
            }


    }
}

/*accountDifference*/
#accountDifference{
    .min-title{
        margin-top: 20px;
        text-align: center;
        font-size: @fontSize18;
        color: #2c89d4;
    }
    .content-main-item5{
        width: @mainWidth;
        .marginAuto;
        .flexBox;
        justify-content: space-between;
        margin-top: 40px !important;
        margin-bottom: 40px !important;
        aside{
            .item-summary{
                width: 280px;
                height: 280px;
                border-radius: 50%;
                border: 1px dashed #1e81d2;
                .flexBoxCenter;
                p{
                    .flexBoxCenter;
                    padding: 10px;
                    color: #fff;
                    width: 240px;
                    height: 240px;
                    border-radius: 50%;
                    background-color: #1e81d2;
                }
            }
        }

    }

}

/*serviceCommission*/
#serviceCommission{
    padding: 20px 0 40px 0;
    background-color: #f4f4f4;
    .title{
        h3{
            background-image: linear-gradient(135deg, #f4f4f4, #f4f4f4), linear-gradient(135deg, #1e81d2, #d3d3d3);
        }
    };
    .content-main-item6{
        width: @mainWidth;
        .marginAuto;
        .flexBox;
        justify-content: space-between;
        aside{
            width: 590px;
            height: 412px;
            background-color: #fff;
            .item6-title{
                margin-top: 20px;
                font-size: @fontSize24;
                color: @color;
                text-align: center;
            }
            .item6-content{
                padding: 10px;

                .item6-list{
                    color: #2c89d4;
                    font-size: 20px;
                    line-height: 2.5;
                    span{
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        background-color: #2c89d4;
                        border-radius: 50%;
                        vertical-align: middle;
                        margin-right: 15px;
                    }
                }
                .item6-list-text{
                    margin-left: 15px;
                    line-height: 1.8;
                }
            }
        }
    }
}

/*financialSecurity*/
#financialSecurity{
    width: @mainWidth;
    .marginAuto;
    .content-main-item7{
        ul{
            .flexBox;
            li{
                .flexBoxCenter;
                width: 178px;
                height: 78px;
                border-left: 1px  solid #1e81d2;
                border-top: 1px  solid #1e81d2;
            }
            li:last-child{
                border-right: 1px  solid #1e81d2;
            }
            li:first-child{
                color: @mainFontColor;
            }
        }
        ul:last-child{
            border-bottom: 1px  solid #1e81d2;

        }
    }
}

/*financialSecurity1*/
#financialSecurity1{
    padding: 20px 0 40px 0;
    background-color: #f4f4f4;
    .title{
        h3{
            background-image: linear-gradient(135deg, #f4f4f4, #f4f4f4), linear-gradient(135deg, #1e81d2, #d3d3d3);
        }
    };
    .content-main-item7{
        width: @mainWidth;
        .marginAuto;
        .flexBox;
        justify-content: space-between;
        aside{
            width: 590px;
            height: 412px;
            .item7-title{
                margin-top: 20px;
                font-size: @fontSize24;
                color: @mainFontColor;
            }
            .item7-content{
                padding: 10px;
                .item7-list{
                    color: @mainFontColor;
                    font-size: 20px;
                    line-height: 2.5;
                    span{
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        background-color: @mainFontColor;
                        border-radius: 50%;
                        vertical-align: middle;
                        margin-right: 15px;
                    }
                }

            }
        }
        aside:nth-child(2){
            background-color: #d4302c;
            color: #fff;
            .item7-title{
                color: #fff;
                padding:0 10px;
            }
            .item7-list{
                color: #fff;
                span{
                    background-color: #fff;
                }
            }


        }
    }


}

/*financialSecurity2*/
#financialSecurity2{
    .content-main-item8 {
        width: @mainWidth;
        .marginAuto;
        .flexBox;
        aside {
            flex: 0 0 32%;
            margin: 22px 10px;
            width: 225px;
            .item-title {
                font-size: 24px;
                height: 45px;
                .flexBoxCenter;
                justify-content: flex-start;
                margin-left: 10px;
                color: @mainFontColor;
            }

            .item-summary {
                height: 260px;
                background-color: #f4f4f4;

                p {
                    padding: 5px 10px;
                    line-height: 2;
                }
            }
            .item-summary:hover{
                background-color: #fff;
                cursor: pointer;
            }
        }

    }
    .item8-img{
        img{
            width: 384px;
            height: auto;
        }

    }
}


/*financialSecurity3*/
#financialSecurity3{
    width: @mainWidth;
    .marginAuto;
    .content-main-item3{
        .item3-row{
            background-color: #f4f4f4;
            display: flex;
            img{
                height: 317px;
            }
            aside{
                padding: 15px;
                .item-title{
                    font-size: @fontSize24;
                }
                .item-summary{
                    line-height: 2.5;
                }
            }


        }
    }
}

/*contactInformation*/
#contactInformation{
    .content-main-item9{
        width: @mainWidth;
        .marginAuto;
        .flexBox;
        justify-content: space-around;
        aside{
            img{
                display: flex;
                flex-direction: column;
                cursor: pointer;
            }
            .qq,.weChat{
                position: relative;
            }
            .QRCodeqq,.QRCodeWeChat{
                display: none;
                position: absolute;
                margin-top: -125px;
            }

        }



    }
}

/*footer*/
footer{
    width: @maxWidth;
    height: 142px;
    background-color: #000;
    main{
        height: 142px;
        width: @mainWidth;
        .marginAuto;
        .flexBoxBetween;
        aside{
            color: #efefef;
            h4{
                font-size: 30px;
            }
        }
    }

}


/*float-top*/
.float{
    position: fixed;
    top: 70%;
    right: 5%;
    z-index: 1111;
    .float-top{
        width: 80px;
        background-color: #6666;
        cursor: pointer;
        div{
            height: 80px;
            .flexBoxCenter;
            color: #fff;
            font-size: 50px;
        }
    }
}


.item2-list,.item2-list2,.item2-list3,.item2-list4,.item2-list5 {
    cursor: pointer;
}



